<!--中间的表单设置-->
<template>
  <div>
    <!-- <a-button @click="validate">数据预览</a-button> -->
    <a-form
      ref="form"
      :model="setUpList"
      :layout="(layout as Tlayout)"
      auto-label-width
    >
      <!-- 新增v-show用作搭配配置是否显示 -->
      <a-row :gutter="16">
        <a-col
          v-for="(item, index) in setUpList"
          :key="index"
          :span="item.span"
          v-show="item.show"
        >
          <FormItem
            :componentType="item.componentType"
            :code="item.code"
            :props="item.props"
            :name="item.name"
            :required="item.required"
            :regex="regexList.includes(item.componentType) ? regex : undefined"
            v-model:values="item.values"
          />
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { useSetupFormStore } from '@/store';
import FormItem from '../form-item/index.vue';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
type Tlayout = 'inline' | 'horizontal' | 'vertical' | undefined;

const props = withDefaults(
  //参数说明
  defineProps<{
    setUpList: any[]; //tab显示的tab列表
    layout: string; //a-form的layout参数,
    //正则库
    regex: {
      [name: string]: {
        role: any;
        name: any;
      };
    };
  }>(),
  {}
);

// const store = useSetupFormStore();

// let tabList = ref<any>();

// watchEffect(() => {
//   console.log('====================================大萨达');
//   console.log(props.setUpList);
//   console.log('====================================');
// });

const regexList = ['TEXT']; //可以传递正则库的控件类型列表，避免内存泄漏

const form = ref();

//表单校验函数
const validate = async () => {
  console.log(form.value);

  const res = await form.value.validate();
  if (res) return Promise.resolve();
  return Promise.reject();
};
</script>

<style lang="less" scoped></style>
